<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米登陆账号</title>
    <link rel="shortcut icon" href="image/mi.png" type="image/png">
    <link rel="icon" href="image/mi.png" type="image/png">
    <style>
    html,body{
        height: 100%;
        background-color: #eee;
    }
    main{
        margin: 0 auto;
        background-color: white;
        width: 960px;
        height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 100px;
    }
    header{
        text-align: center;
        margin-top: 20px;
    }
    header h2{
        color: #5F4242;
    }
    img:nth-child(2){
        position: relative;
        left:-30px;
    }
    #photo{
        position: relative;
        top: -48.4px;
        left: 478px;
    }
    form{
        text-align: center;
    }
    input{
        border: 1px solid black;
        height: 50px;
        width: 350px;
        margin: 10px;
    }
    input[type=button]{
        background-color: #EF5B00;
        margin-top: 15px;
        color: white;
    }
    section{
        text-align: center;
    }
    section span{
        display: inline-block;
        border-bottom: 1px solid black;
        height: 0.2rem;
        width: 22vw;
        position: relative;
        top: -3px;
    }
    .info a{
        text-decoration: none;
        color: gray;

    }

    .info a:nth-child(1){
        border: none;
        border-right: 1px solid gray;
        padding-right: 10px;
       
    }
    .info a:nth-child(2){
        padding-left: 10px;
    }
    .info a:hover{
        color: #EF5B00
    }
    
    footer{
        position: fixed;
        bottom: 0;
        font-size: 14px;
        width: 100%;
        color: gray;

    }
    footer nav{
        text-align: center;
    }
    footer>nav>div a{
        text-decoration: none;
        color: gray;
        border: none;
        border-right: 1px solid gray;
        padding-left: 10px;
        padding-right: 10px;
    }
    footer>nav>div a:last-child{
        border-right: none;
    }
    nav>p>a img{
        width: 12px;
        height: 12px;
    }
    </style>
</head>
<body>
    <main>
        <header>
        <a id="photo" href="#"><img src="image/we.png" alt=""></a>
        <img src="image/mi.png" alt="">
        <h2>小米账号登录</h2>
        </header>
        <form action="#">
            <input type="text" name="text" placeholder="邮箱/手机号码/小米账号"><br>
            <input type="password" name="password" placeholder="密码"><br>
            <input type="button" name="button" value="立即登录">
        </form>
       <section>
             <span></span>
              其他登陆方式
            <span></span>
       </section>
        <section>
            <a href="#"><img src="image/weibo.png" alt=""></a> 
            <a href="#"> <img src="image/qq.png" alt=""></a>
             <a href="#"><img src="image/weixin.png" alt=""></a>
         </section>
         <section class="info">
             <a href="#">注册小米账号</a>
             <a href="#">忘记密码？</a>
         </section>
    </main>
    <footer>
        <nav>
            <div>
            <a href="#">简体</a>
            <a href="#">繁体</a>
            <a href="">English</a>
            <a href="#">常见问题</a>
            </div>
            <p>小米公司版权所有-京ICP备10046444 <a href="#"><img src="image/fj.png" alt=""></a>  京公网安备11010802020134号-京ICP证110507</p>
        </nav>
    </footer>
</body>
</html>